import type { Meta, StoryObj } from '@storybook/react'
import { action } from '@storybook/addon-actions'
// import FormTitle from '@/components/FormTitle'
import React from 'react'
import { TextField } from '@mui/material'
import { FormTitle } from '../../lib/index.js'
// console.log("-------------------------------------");
// console.log(FormTitle);

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: 'Ui/FormTitle',
  component: FormTitle,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: 'centered',
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ['autodocs'],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {
    // backgroundColor: { control: "color" },
  },
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
  args: {},
} satisfies Meta<typeof FormTitle>

export default meta
type Story = StoryObj<typeof meta>
export const Default: Story = {
  args: {
    title: 'Participant Identify Information',
    titleType: 'default',
    titleProps: undefined,
    componentsProps: undefined,
    // TODO 2024-07-24 16:29:18 add form components
    children: [
      <>
        <TextField
          key={'c-1'}
          id="outlined-basic"
          label="Outlined"
          variant="outlined"
        />
      </>,
    ],
  },
}
export const WithBg: Story = {
  args: {
    ...Default.args,
    titleType: 'withBg',
  },
}
